{% extends "template/base.html" %}
{% block head %}
    {{ super() }}

    <title>网上零食销售系统</title>

{% endblock %}

{% block body %}

    {% include 'template/user-header.html' %}

    <article>
        <div class="container">


            <section id="goods" class="lists"
                     style="width: 1200px;
                             padding: 20px 0;
                             background: transparent;
                             margin-top: 30px;
                             position: relative;
                             right: -50px;"
            >
                <!--商品浏览界面-->
                {% if request.args.k %}
                    <div style="text-align: left;color: #666;font-size: 18px">为您找到关于 “ {{ request.args.k }} ” 的零食：</div>
                {% else %}
                    <h1 align="left"><span>在售零食</span> | Snacks</h1>
                {% endif %}

                <div class="good-list" style="display: flex; flex-wrap: wrap;">
                    {% for product in products %}

                        <a class="item" href="{{ url_for('web.product_item_ep', product_id=product.id) }}"
                           target="_blank">
                            <img src="{{ url_for('static', filename='upload/' + product.img) }}">
                            <div class="text">
                                {#                                <div>{{ product.id }}</div>#}
                                <div class="price">￥{{ product.price }}</div>
                                <div class="name">{{ product.name }}</div>
                                <div class="reserve">库存：{{ product.reserve }}</div>
                                {#                                <a href="#" class="admin-name">{{ product.admin.name }}</a>#}
                            </div>
                        </a>

                    {% endfor %}
                </div>
                <style>
                    .item, .item * {
                        text-decoration: none !important;
                    }

                    .item {
                        margin-top: 20px;
                        margin-bottom: 20px;
                        width: 252px;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        background: #EEEEE0;
                        cursor: pointer;
                        border: 1px solid #ddd;
                        transition: all 200ms;
                        margin-right: 48px;
                    }

                    .item:hover {
                        border: 1px solid darkorange;
                        transition: all 200ms;
                    }

                    .item:not(:nth-child(4n)) {

                    }

                    .item img {
                        width: 250px;
                        height: 250px;
                    }

                    .item .text {
                        border-top: 1px solid #efefef;
                        background: #fff;
                        display: flex;
                        width: 100%;
                        flex-direction: column;
                        align-items: flex-start;
                        padding: 10px;

                    }

                    .item .price {
                        color: orangered;
                        font-weight: bold;
                        font-size: 20px;

                    }

                    .item .name {
                        font-size: 1em;
                        text-align: left;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 100%;
                    }

                    .item .reserve {
                        color: #777;
                    }

                </style>
            </section>

        </div>
    </article>
    {% include 'template/pagination.html' %}
    <footer><!--尾注-->

    </footer>

{% endblock %}

